<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>视频管理</el-breadcrumb-item>
      <el-breadcrumb-item>视频列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row>
        <el-col :span="4">
          <el-select v-model="queryParam.chapterId" clearable @clear="pageList" @change="pageList" placeholder="请选择章节">
            <el-option v-for="item of chapters" :key="item.chapterId" :value="item.chapterId" :label="item.chapterName"></el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-table :data="tableData" border fit highlight-current-row style="width: 100%">
        <el-table-column prop="chapterId" label="章节" :formatter="chapterFormatter"/>
        <el-table-column prop="videoName" label="视频名称"/>
        <el-table-column prop="ctime" label="上传时间"/>
        <el-table-column label="操作" align="center">
          <template v-slot="{row}">
            <el-button size="mini" @click="player(row)">预览</el-button>
            <el-button size="mini" type="danger" @click="remove(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <pagination 
        v-show="total>0" 
        :total="total" 
        :page.sync="queryParam.pageIndex" 
        :limit.sync="queryParam.pageSize"
        @pagination="pageList"/>
    </el-card>
    <el-dialog :visible.sync="dialog" @close="dialogClosed">
      <vue-aliplayer-v2
        ref="VueAliplayerV2Ref"
        :options="options"/>
    </el-dialog>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import Pagination from '@/components/Pagination'
import videoApi from '@/api/video'
export default {

  components: { Pagination },

  data () {
    return {
      queryParam: {
        chapterId: null,
        level: null,
        pageIndex: undefined,
        pageSize: undefined
      },
      // 获取到的视频总条数
      total: 0,
      tableData: [],
      dialog: false,
      options: {
        vid: null,
        playauth: null
      },
    }
  },
  props: {
    mainLevel: {
      type: Number
    }
  },
  watch: {
    mainLevel() {
      this.queryParam.chapterId = null
      this.init()
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.queryParam.pageIndex = this.page.index
      this.queryParam.pageSize = this.page.size
      this.queryParam.level = this.mainLevel
      this.pageList()
    },
    pageList() {
      videoApi.pageList(this.queryParam).then(data => {
        if (data.code === this.ok.code) {
          this.tableData = data.response.list
          this.total = data.response.total
          this.queryParam.pageIndex = data.response.pageNum
        }
      })
    },
    player(row) {
      videoApi.getPlayAuth(row.videoSourceId).then(data => {
        this.options.vid = data.response.videoId
        this.options.playauth = data.response.videoPlayAuth
        this.dialog = true
      })
    },
    dialogClosed() {
        this.options.vid = null
        this.options.playauth = null
    },
    async remove(row) {
      // 弹窗询问用户是否删除数据
      const confirmResult = await this.$confirm(
        '此操作将永久删除该章节, 是否继续?', 
        '提示', 
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)

      // 如果用户确认删除，则返回值为字符串 confirm
      // 如果用户取消了删除，则返回值为字符串 cancel
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除')
      }
      const deleteFilter = {
        videoId: row.videoId,
        videoSourceId: row.videoSourceId
      }
      videoApi.remove(deleteFilter).then(re => {
        if (re.code === this.ok.code) {
          this.$message.success(re.message)
          this.pageList()
        }
      })
    },
    chapterFormatter(row, column, cellValue, index) {
      return this.chapterEnumFormat(cellValue)
    },
  },
  computed: {
    ...mapGetters('enumItem', [
      'enumFormat'
    ]),
    ...mapState('page', {
      page: state => state.page
    }),
    ...mapState('resCode', {
      ok: state => state.OK
    }),
    ...mapState('chapter', {
      chapters: state => state.chapters
    }),
    ...mapGetters('chapter', [
      'chapterEnumFormat'
    ]),
    ...mapState('enumItem', {
      editUrlEnum: state => state.question.editUrlEnum
    })
  }
}
</script>

<style lang="less" scoped>

</style>
